/*
 * @Description: 带月份的列表
 * @Author: yingying.fan
 * @Date: 2019-04-01 11:04:34
 * @Last Modified by: zhenqiang.hong
 * @Last Modified time: 2019-05-07 13:43:28
 */
<template>
  <scroll
    ref="scroll"
    :useBody="useBody"
    :up="up"
    :getListData="getListDataByScroll"
    :noDataText="noDataText"
  >
    <slot
      name="header"
      slot="header"
    ></slot>
    <template v-for="(item, i) in dataList">
      <!-- 月份分类栏 -->
      <div
        class="flex-h flex-vc list-date-item"
        v-if="isDifferentToLast(getMonth(item),i-1)"
        :key="'time_'+i"
      >
        <span class="flex1">{{getMonth(item)|formatDate}}</span>
        <!-- 月份右边展示的数据 -->
        <slot
          name="monthRight"
          v-bind="item"
        >
        </slot>
      </div>
      <div
        :key="'div_'+i"
        class="list-module-wrapper"
      >
        <!-- 记录栏 -->
        <slot
          name="itemList"
          v-bind="{item,i}"
        >
          <component
            v-for="(detail,index) in getDetailList(item)"
            :key="'detail_'+i+'_'+index"
            v-bind:is="getItemComponent(detail)"
            :data="detail"
            :class="{'xb_border ddd':index!==0||!isDifferentToLast(getMonth(item),i-1)}"
          ></component>
        </slot>
      </div>
    </template>
  </scroll>
</template>

<script>
import { dateFtt } from 'vue-xiaobu-utils'
import ScrollWithNet from '@/components/scroll/ScrollWithNet'
export default {
  name: 'ConsumeList',
  components: {
    'scroll': ScrollWithNet
  },
  props: {
    getMonth: {
      type: Function,
      default: (item) => {
        return item.MONTH
      }
    },
    // 传入获取列表数据的方法
    getListByApi: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      noDataText: '无数据',
      itemName: '',
      dataList: [],
      // 是否使用body作为滑动容器
      useBody: false,
      up: {
        noMoreSize: 11,
        page: { size: 10 }
      },
      getListByAjax: null // 获取协议的方法
    }
  },
  filters: {
    formatDate(dateStr) {
      if (!dateStr) {
        return ''
      }
      if (dateStr.length < 10) {
        dateStr = dateStr + '-01'
      }
      return dateFtt('yyyy年MM月', dateStr)
    }
  },
  mounted() {
    if (this.getListByApi && !this.getListByAjax) {
      this.getListByAjax = this.getListByApi
    }
  },
  methods: {
    // 获取月份下的列表数据的方法
    getDetailList(item) {
      return []
    },
    // 获取月份下的数据展示模型的方法,这个必须继承实现才行
    getItemComponent(item) {
      return null
    },
    // 判断列表的月份是否与上一页不同：不同则展示，相同则隐藏
    isDifferentToLast(month, lastIndex) {
      if (lastIndex >= 0 && month === this.getMonth(this.dataList[lastIndex])) {
        return false
      }
      return true
    },
    // 通过滚动上拉获取数据
    getListDataByScroll(pageIndex, pageSize) {
      return this.getListByAjax(pageIndex, pageSize).then(body => {
        let list = body.LIST || []
        if (pageIndex === 1) {
          this.dataList = list
        } else {
          this.dataList = this.dataList.concat(list)
        }
        console.log('BaseMonthList中的列表数据', this.dataList)
        // TODO: 注意这里return的length不可以是list.length
        return { length: pageSize, count: body.COUNT }
        // return { length: 0, count: 0 }
      }).catch(error => {
        console.error(error)
      })
    },
    // 刷新列表数据
    getListRefresh() {
      this.$refs.scroll.mescroll.resetUpScroll()
    }
  }
}
</script>

<style>
html {
  background-color: #f2f5f6;
  /* overflow: hidden; */
}
/* .mescroll > div:nth-child(2) {
  background-color: #ffffff;
} */
.list-date-item {
  padding: 0 30px;
  height: 70px;
  background-color: #f2f5f6;
  color: #999999;
  font-size: 24px; /*px*/
}
.list-module-wrapper {
  background-color: #ffffff;
}
</style>
